<script setup lang='ts'>
const visible = defineModel<boolean>()
const data = ref([
  {
    time: '2023-03-01',
    netCost: 5000,
    inquiryCost: 1000,
    salesCost: 2000,
    externalCost: 1500,
    accurateQuote: 12000,
    netProfit: 2500,
    netProfitRate: '20.83%',
    grossProfit: 3500,
    grossProfitRate: '29.17%',
  },
  {
    time: '2023-03-02',
    netCost: 5500,
    inquiryCost: 1200,
    salesCost: 2200,
    externalCost: 1600,
    accurateQuote: 13000,
    netProfit: 2500,
    netProfitRate: '19.23%',
    grossProfit: 3700,
    grossProfitRate: '28.46%',
  },
  {
    time: '2023-03-06',
    netCost: 5600,
    inquiryCost: 1200,
    salesCost: 2200,
    externalCost: 1600,
    accurateQuote: 13000,
    netProfit: 2500,
    netProfitRate: '19.23%',
    grossProfit: 3700,
    grossProfitRate: '28.46%',
  },

])
</script>

<template>
  <el-drawer v-model="visible" direction="rtl" size="860" title="历史利润">
    <el-table
      :data="data" border
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column prop="time" label="时间" />

      <el-table-column label="成本">
        <el-table-column prop="netCost" label="网内">
          <!--  对比上一样数据，若少于则字体绿色，多于则红色 -->
          <template #default="{ row, $index }">
            <span :style="{ color: row.netCost > 5000 ? 'red' : 'green' }">{{ row.netCost }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inquiryCost" label="询价" />
        <el-table-column prop="salesCost" label="销售" />
        <el-table-column prop="externalCost" label="外采" />
      </el-table-column>
      <el-table-column prop="accurateQuote" label="精准报价" />
      <el-table-column label="净">
        <el-table-column prop="netProfit" label="利润" />
        <el-table-column prop="netProfitRate" label="利率" />
      </el-table-column>

      <el-table-column label="毛">
        <el-table-column prop="grossProfit" label="利润" />
        <el-table-column prop="grossProfitRate" label="利率" />
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<style scoped lang='scss'>
</style>
